<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.v-for都能遍历什么</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">

			<h2>v-for可以遍历数组</h2>
			<ul>
				<!-- <li v-for="(p,index) in persons" :key="index"> -->
				<li v-for="p in persons" :key="p.id">
					{{p.name}} - {{p.age}} - {{p.sex}}
				</li>
			</ul>

			<hr>

			<h2>v-for可以遍历字符串</h2>
			<ul>
				<li v-for="(char,index) in str" :key="index">
					{{char}} - {{index}}
				</li>
			</ul>

			<hr>

			<h2>v-for可以遍历对象</h2>
			<ul>
				<li v-for="(value,key,index) in car" :key="key">
					{{key}} - {{value}} - {{index}}
				</li>
			</ul>

			<hr>

			<h2>v-for可以遍历指定次数</h2>
			<ul>
				<li v-for="(number,index) in 10" :key="number">
					{{number}} - {{index}}
				</li>
			</ul>
			
			<h2>v-for很健壮，下面的遍历都不报错</h2>
			<ul>
				<!-- <li v-for="(a,b) in true"></li> -->
				<!-- <li v-for="(a,b) in null"></li> -->
				<!-- <li v-for="(a,b) in undefined"></li> -->
				<!-- <li v-for="(a,b) in x"></li> -->
				<!-- <li v-for="(a,b) in "></li> -->
			</ul>

		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					x:Symbol(),
					persons:[
						{id:'yt7657wte',name:'马冬梅',sex:'女',age:19},
						{id:'0ijdsa9u9',name:'周冬雨',sex:'女',age:20},
						{id:'popoi009d',name:'周杰伦',sex:'男',age:21},
						{id:'gtryutjty',name:'温兆伦',sex:'男',age:22}
					],
					str:'hello,atguigu',
					car:{
						name:'红旗',
						price:'100万'
					},
				}
			})
		</script>
	</body>
</html>